<template>
   <div id="app">
    <div id="main" style="width: 100%;height:400px;margin:0 auto;"></div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  data() {
    return {
      color: ["red", "bule"],
      newarr:[],
      priceArr:[]
    };
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "商品数据"
        },
        tooltip: {},
        legend: {
          data: ["价格"]
        },
        xAxis: {
          data: this.newarr
        },
        yAxis: {},
        series: [
          {
            name: "价格",
            type: "bar",
            data: this.priceArr,
            barWidth: 10
          }
        ],
        color: this.color
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    let id=localStorage.getItem('ID')
    this.$store.dispatch("goods/get", { id, size: "100", current: "" });
    let arr = this.$store.getters.goodsStu.rows;
    let newarr = [];
    let priceArr = [];
    for (let item of arr) {
      newarr.push(item.name);
      priceArr.push(item.price);
    }
this.newarr=newarr
this.priceArr=priceArr
    console.log(newarr, priceArr);

    // console.log(arr);

    this.drawChart();
  }
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>